<template>
  <div class="echartsBody" ref="echartsBody"></div>
</template>

<script lang="ts" setup>
import { ref, onMounted, nextTick } from "vue";

import * as echarts from "echarts";

const echartsBody = ref(null);

// 节流函数
const throttle = (callback: Function, delay: number) => {
  let flag = true;
  return () => {
    if (flag) {
      flag = false;
      setTimeout(() => {
        callback.bind(this)();
        flag = true;
      }, delay);
    }
  }
}


onMounted(() => {
  window.onresize = throttle(() => {
    nextTick(() => {
      myChart.resize()
    })
  }, 300)

  const myChart = echarts.init(echartsBody.value as any);

  let option = {
    legend: {},
    tooltip: {
      trigger: "axis",
      showContent: false,
    },
    dataset: {
      source: [
        ["product", "2012", "2013", "2014", "2015", "2016", "2017"],
        ["Milk Tea", 56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
        ["Matcha Latte", 51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
        ["Cheese Cocoa", 40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
        ["Walnut Brownie", 25.2, 37.1, 41.2, 18, 33.9, 49.1],
      ],
    },
    xAxis: { type: "category" },
    yAxis: { gridIndex: 0 },
    grid: { top: "55%" },
    series: [
      {
        type: "line",
        smooth: true,
        seriesLayoutBy: "row",
        emphasis: { focus: "series" },
      },
      {
        type: "line",
        smooth: true,
        seriesLayoutBy: "row",
        emphasis: { focus: "series" },
      },
      {
        type: "line",
        smooth: true,
        seriesLayoutBy: "row",
        emphasis: { focus: "series" },
      },
      {
        type: "line",
        smooth: true,
        seriesLayoutBy: "row",
        emphasis: { focus: "series" },
      },
      {
        type: "pie",
        id: "pie",
        radius: "30%",
        center: ["50%", "25%"],
        emphasis: { focus: "data" },
        label: {
          formatter: "{b}: {@2012} ({d}%)",
        },
        encode: {
          itemName: "product",
          value: "2012",
          tooltip: "2012",
        },
      },
    ],
  };


  myChart.setOption(option);


});
</script>

<style lang="scss" scoped>
.echartsBody {
  width: 100%;
  height: 800px;
}
</style>
